<template>
	<view class="page_bg">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="top_nav">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">发布</view>
		</view>
		<view class="flex-col group_1">
			<view class="flex-col">
				<view class="justify-between section_1">
					<text class="text_1">发布分类</text>
					<u-input type="select" :select-open="show" v-model="cate.name" placeholder="请选择发布分类"
						@click="show = true"></u-input>
					<u-picker mode="selector" v-model="show" :range="cates" range-key="name" @confirm="selectAddress">
					</u-picker>
				</view>
				<view class="section_2">
					<view class="flex-col group_4">
						<text class="text_3">文字描述</text>
						<u-input v-model="desc" type="textarea" placeholder="请输入文字描述" />
					</view>
					<view class="flex-col group_5">
						<text>上传图片</text>
						<view class="flex-row group_6">
							<mix-upload-image :length="9" @onChange="onImageChange"></mix-upload-image>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col items-center button" @click="addConfirm = true">
				<text>发布</text>
			</view>
			<u-modal v-model="addConfirm" show-cancel-button content="确定发布" @confirm="sendRelease"></u-modal>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				cates: [], // 分类列表
				cate: {}, // 分类
				desc: '', // 描述
				images: [], // 图片列表

				show: false,
				addConfirm: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				vk.callFunction({
					url: 'client/bbs/pub/categories',
					data: { need_user_info: true },
					success(data) {
						that.cates = data.rows
					}
				})
			},
			pageBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 完成分类选择
			selectAddress(e) {
				this.cate = this.cates[e[0]]
			},
			// 选择图片
			onImageChange(e) {
				this.images = e.list.map(item => item.url)
			},
			// 发布
			sendRelease() {
				if (vk.pubfn.isNull(this.cate)) {
					this.$refs.uToast.show({
						title: '请选择发布分类',
						type: 'warning',
					})
					return
				}
				if (this.desc.length < 5) {
					this.$refs.uToast.show({
						title: '内容长度太短啦~',
						type: 'warning',
					})
					return
				}

				uni.vk.callFunction({
					url: 'client/bbs/kh/add_release',
					data: {
						category_id: that.cate._id,
						content: that.desc,
						images: that.images,
						need_user_info: true
					},
					success() {
						that.cate = {}
						that.desc = ''
						that.images = []
						that.$refs.uToast.show({
							title: '发布成功，请等待审核！',
							type: 'success',
							duration: 1000
						})
						uni.$emit('pageFresh')
						setTimeout(() => {
							vk.navigateBack();
						}, 1000)
					},
					fail(e) {
						uni.vk.alert(e.msg)
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		background: #f5f5f5;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
	}

	.status_bar {
		background-color: rgb(255, 255, 255);
	}

	.top_nav {
		padding-bottom: 24rpx;
		color: rgb(51, 51, 51);
		font-size: 34rpx;
		line-height: 41rpx;
		white-space: nowrap;
		background-color: rgb(255, 255, 255);
		height: 88rpx;
		position: relative;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.1);

		.image_1 {
			left: 21rpx;
			top: 27rpx;
			width: 19rpx;
			height: 35rpx;
			position: absolute;
		}

		.cate {
			width: 100%;
			padding: 20rpx 0;
			color: rgb(51, 51, 51);
			font-size: 34rpx;
			font-weight: 500;
			line-height: 41rpx;
			white-space: nowrap;
			text-align: center;
		}
	}

	.group_1 {
		padding: 20rpx;
		flex: 1 1 auto;
		overflow-y: scroll;

		.button {
			margin-top: 166rpx;
			padding: 22rpx 0 20rpx;
			color: rgb(255, 255, 255);
			font-size: 32rpx;
			line-height: 38rpx;
			white-space: nowrap;
			background-color: rgb(51, 51, 51);
			border-radius: 40rpx;
		}

		.section_1 {
			padding: 18rpx 20rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;
			font-size: 28rpx;
			line-height: 34rpx;
			align-items: center;

			.text_1 {
				color: rgb(51, 51, 51);
				white-space: nowrap;
				margin-right: 24rpx;
			}

			/deep/ .u-input__input {
				color: #828282;
			}
		}

		.section_2 {
			margin-top: 20rpx;
			padding: 38rpx 20rpx 14rpx;
			background-color: rgb(255, 255, 255);
			border-radius: 12rpx;

			.group_4 {
				min-height: 300rpx;

				/deep/ .u-input__textarea {
					color: #828282;
				}
			}

			.group_5 {
				margin-top: 32rpx;
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.group_6 {
					margin-top: 22rpx;
				}
			}

			.text_3 {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}
		}
	}
</style>
